const path = require('path')

module.exports = {
    entry: './src/js/main.js',
    output: {
        // 动态获取文件地址
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/',
        assetModuleFilename: 'img/[name][hash:8][ext][query]'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                // 使用多个loader时，webpack是从右向左
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                type: 'asset'
            },
            {
                // 所有JS文件
                test: /\.js$/,
                // 排除了node_modules 和 bower_components
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    }
}